<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui" template="../templates/ui.xhtml">

	<ui:define name="content">

		<h:form id="checkOutCartForm" prependId="false">
			<p:panel id="cartPnl" header="Check out Basket" toggleable="true"
				toggleSpeed="500" widgetVar="panel">

				<p:ajax event="toggle" listener="#{cart.toggle}" />

				<h:outputText value="There are " />
				<h:outputLabel value="#{fn:length(cart.cartItemsList)} Item(s)"
					style="font-weight:bold" />
				<h:outputText value="  in your Basket" />
				<p:dataTable value="#{cart.cartItemsList}" var="items"
					rendered="#{fn:length(cart.cartItemsList) gt 0}"
					emptyMessage="No Items Found" styleClass="cart-dataList"
					id="cartItemsGrid" type="definition">
					<p:column headerText="S.No">
						<h:outputText value="#{items.sNo}" />
					</p:column>
					<p:column headerText="Name">
						<h:outputText
							value="#{items.brand} #{items.itemName}  #{items.size }" />
					</p:column>
					<p:column headerText="Quantty">
						<h:outputText value="#{items.qty}" />
					</p:column>
					<p:column headerText="Price">
						<h:outputText value="#{items.price}" />
					</p:column>
					<p:column exportable="false">
						<p:commandLink title="Remove" update=":checkOutCartForm :cartForm"
							action="#{cart.removeFromCart }">
							<h:graphicImage value="/images/minus.png" />
							<f:setPropertyActionListener value="#{items}"
								target="#{cart.selectedCartDTO}" />
						</p:commandLink>
					</p:column>
					<p:separator />
					<p:columnGroup type="footer">
						<p:row>
							<p:column colspan="3" footerText="Shipping:"
								style="text-align:right" />
							<p:column footerText="#{cart.shippingCharges}" colspan="2" style="text-align:left"/>
						</p:row>
						<p:row>
							<p:column colspan="3" footerText="Sub Total:"
								style="text-align:right" />
							<p:column footerText="#{cart.subTotal}" colspan="2" style="text-align:left"/>
						</p:row>
						<p:row>
							<p:column colspan="3" footerText="Total Amount Payable:"
								style="text-align:right" />
							<p:column footerText="#{cart.total}" colspan="2" style="text-align:left"/>
						</p:row>

					</p:columnGroup>
				</p:dataTable>
				<!--<h:panelGrid columns="2" styleClass="cart-smallGrid">
					<h:outputLabel value="Shipping:" styleClass="cart-smallGridText" />
					<h:outputText value="#{cart.shippingCharges}"
						styleClass="cart-smallGridPrice" />
					<h:outputLabel value="Sub Total:" styleClass="cart-smallGridText" />
					<h:outputText value="#{cart.subTotal }"
						styleClass="cart-smallGridPrice" />
					<h:outputLabel value="Total Amount Payable:"
						styleClass="cart-smallGridText" />
					<h:outputText value="#{cart.total }"
						styleClass="cart-smallGridPrice" />
				</h:panelGrid>
				--><h:commandLink>
					<h:graphicImage value="/images/pdf.png" />
					<p:dataExporter target="cartItemsGrid" type="pdf" fileName="cart"
						preProcessor="#{cart.preProcessPDF}" />
				</h:commandLink>
			</p:panel>

		</h:form>
		<h:panelGrid id="chkOutGrid" width="100%;">

			<p:panel header="Check Out" toggleable="true" id="authForm"
				rendered="#{(!registration.showRegistrationDetailsFlag) and (fn:length(cart.cartItemsList) gt 0)}">
				<h:panelGrid columns="2" width="100%;">
					<h:form id="registerForm">
						<h:panelGrid width="100%">
							<p:fieldset legend="Guest/Register">
								<p:selectOneRadio id="chkOutType"
									value="#{registration.chkOutType}" required="true"
									layout="pageDirection">
									<f:selectItem itemLabel="Guest" itemValue="Guest" />
									<f:selectItem itemLabel="New User" itemValue="New User" />
								</p:selectOneRadio>
								<p:message for="chkOutType" />
								<p:commandButton value="Continue"
									action="#{registration.proceedRegistration}"
									style="float:right;" update=":chkOutGrid"
									styleClass="ui-button"></p:commandButton>
							</p:fieldset>
						</h:panelGrid>
					</h:form>
					<h:form id="loginForm">
						<h:panelGrid width="100%;" style="float:right;" id="loginGrid">
							<p:fieldset legend="Login to Continue">
								<p:message for="mobileNo" />
								<p:message for="pwd" />
								<h:panelGrid columns="3" width="100%;">
									<p:outputLabel value="Mobile No:" style="width:50%;" />
									<p:inputText id="mobileNo" value="#{login.mobileNo }"
										required="true"
										requiredMessage="Please Enter 10 Digit Mobile Number"
										style="width:50%;" />
									<p:watermark value="10 Digit Mobile Number" for="mobileNo" />
									<p:outputLabel value="Password:" style="width:50%;" />
									<p:password id="pwd" value="#{login.pwd}" style="width:50%;"
										feedback="true" required="true"
										requiredMessage="Please enter Valid Password" />
									<p:watermark value="Password" for="pwd"></p:watermark>
								</h:panelGrid>
								<p:commandButton value="Login" action="#{login.login}"
									process="loginGrid" style="float:right;" update=":chkOutGrid :topRightMenu"
									styleClass="ui-button"></p:commandButton>
							</p:fieldset>
						</h:panelGrid>
					</h:form>
				</h:panelGrid>
			</p:panel>

			<h:form id="personalDetailsForm">
				<p:panel header="Check out as #{registration.chkOutType}"
					toggleable="true"
					rendered="#{registration.showRegistrationDetailsFlag and (fn:length(cart.cartItemsList) gt 0)}"
					toggleSpeed="500" id="personalDetails">
					<p:panel header="Personal Details" toggleable="true">
						<h:panelGrid columns="3" style="width:100%;">
							<h:outputText value="Name:" />
							<p:inputText id="name" value="#{registration.name}"
								disabled="#{login.loginSuccess}" maxlength="30"
								style="width:300px;" required="true" label="firstName" />
							<p:watermark for="name" value="Name" />
							<h:outputText value="Email:" />
							<p:inputText id="email" value="#{registration.email}"
								maxlength="30" style="width:300px;" required="true"
								label="Email" />
							<p:watermark for="email" value=" joe@gmail.com" />
							<h:outputText value="Mobile:" />
							<p:inputText id="mobile" value="#{registration.mobileNo}"
								maxlength="10" style="width:300px;" required="true"
								label="mobile" />
							<p:watermark for="mobile" value=" 10 digit mobile number" />

							<h:outputText value="Password:"
								rendered="#{registration.chkOutType eq 'New User' }" />
							<p:password id="pwd" value="#{registration.password}"
								rendered="#{registration.chkOutType eq 'New User' }"
								maxlength="10" style="width:300px;" required="true"
								feedback="true" label="mobile" />
							<p:watermark for="pwd" value=" Password"
								rendered="#{registration.chkOutType eq 'New User' }" />
							<h:outputText value="Confirm Password:"
								rendered="#{registration.chkOutType eq 'New User' }" />
							<p:inputText id="confPwd" value="#{registration.confirmPassword}"
								maxlength="10" style="width:300px;" required="true"
								rendered="#{registration.chkOutType eq 'New User' }"
								label="mobile" />
							<p:watermark for="confPwd" value=" Confirm Password" />
						</h:panelGrid>
					</p:panel>
					<div style="height: 10px;" />
					<p:panel header="Address Details" toggleable="true">
						<h:panelGrid columns="2" style="width:100%">
							<h:outputText value="House no:" />
							<p:inputText id="houseNo" value="#{registration.houseNo}"
								style="width:300px;" required="true" label="HouseNo" />
							<h:outputText value="Street Details:" />
							<p:inputText id="street" value="#{registration.street}"
								style="width:300px;" required="true" label="Street" />

							<h:outputText value="Area:" />
							<p:inputText id="area" value="#{registration.area}"
								style="width:300px;" required="true" label="Area" />
							<h:outputText value="Land mark:" />
							<p:inputText id="landMark" value="#{registration.landmark}"
								style="width:300px;" required="true" label="LandMark" />
						</h:panelGrid>

					</p:panel>
					<div style="height: 10px;" />

					<p:messages />

					<p:commandButton value="Back" immediate="true"
						action="#{registration.backToLogin}" update=":chkOutGrid"
						styleClass="ui-button"></p:commandButton>
					<p:commandButton value="Place Order"
						action="#{registration.placeOrder }" update=":personalDetailsForm"
						styleClass="ui-button"></p:commandButton>
				</p:panel>

			</h:form>

		</h:panelGrid>
	</ui:define>
</ui:composition>

<!-- if i keep captcha inside render component and if i do rerender captcha is not rendering -->